<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}"/>
    <link type="text/css" rel="stylesheet" href="../../static/css/public.css" th:href="@{/css/public.css}"/>
    <link type="text/css" rel="stylesheet" href="../../static/css/pagination.css" th:href="@{/css/pagination.css}"/>

</head>
<body>

<!--头部-->
<div th:replace="commons/common::header"></div>
<!--时间-->
<div th:replace="commons/common::time"></div>
<!--主体内容-->
<section class="publicMian ">
    <!--left-->
    <div th:replace="commons/common::left"></div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>订单管理页面</span>


            <form id="excelForm" th:action="@{/bill/uploadExcelByProvider}" method="post" enctype="multipart/form-data" style="display: block;float: right;font:12px bold;">
                <input type="submit" id="submitBtn" value="上传" style="display: block;float: right;text-align: center;font:12px bold;">
                <input type="file" name="excelBillFile" style="display: block;float: right;text-align: center;font:12px bold;"/>
                <select id="excelProviderId" name="excelProviderId" style="display: block;float: right;text-align: center;font:12px bold;">
                    <option value="">请选择</option>
                    <option  th:each="provider:${providers}" th:value="${provider.id}" th:text="${provider.proName}"></option>
                </select>
                <span style="display: block;float: right;text-align: center;font:12px bold;">供应商：</span>
            </form>
            <a th:href="@{/bill/downExcelAll}" style="display: block;float: right;font:12px bold;text-align: center;margin-right: 10px">导出全部订单</a>
            <a th:href="@{/bill/downExcelModel}" style="display: block;float: right;font:12px bold;text-align: center;margin-right: 10px">模板下载</a>

        </div>
        <div class="search">
            <form>
                <span>商品名称：</span>
                <input name="queryProductName" id="queryProductName" type="text" value="">

                <span>供应商：</span>
                <select name="queryProviderId" id="queryProviderId">
                    <!--<c:if test="${providerList != null }">
                        <option value="0">&#45;&#45;请选择&#45;&#45;</option>
                        <c:forEach var="provider" items="${providerList}">
                            <option <c:if test="${provider.id == queryProviderId }">selected="selected"</c:if>
                            value="${provider.id}">${provider.proName}</option>
                        </c:forEach>
                    </c:if>-->
                </select>

                <span>是否付款：</span>
                <select name="queryIsPayment" id="queryIsPayment">

                </select>

                <input	value="查 询" type="button" id="searchbutton">
                <a href="" th:href="@{/bill/add}">添加订单</a>
            </form>
        </div>
        <!--账单表格 样式和供应商公用-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">订单编码</th>
                <th width="20%">商品名称</th>
                <th width="10%">供应商</th>
                <th width="10%">订单金额</th>
                <th width="10%">是否付款</th>
                <th width="10%">创建时间</th>
                <th width="30%">操作</th>
            </tr>
            <tbody id="tbody">

            </tbody>

        </table>
        <div id="Pagination" style="text-align: center;margin-top: 30px"></div>
    </div>
</section>

<div th:replace="commons/common::footer"></div>

<script type="text/javascript" src="../../static/js/time.js" th:src="@{/js/time.js}"></script>
<script type="text/javascript" src="../../static/js/jquery-1.8.3.min.js" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script type="text/javascript" src="../../static/calendar/WdatePicker.js" th:src="@{/calendar/WdatePicker.js}"></script>
<script type="text/javascript" src="../../static/js/rollpage.js" th:src="@{/js/rollpage.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.pagination.js" th:src="@{/js/jquery.pagination.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.form.js" th:src="@{/js/jquery.form.js}"></script>
<script>


    let jsonObj = {
        pageSize: 5
    };

    function queryPage(pageIndex){
        jsonObj.pageIndex=pageIndex+1;//分页插件默认是从0开始
        $.ajax({
            url:"[[@{/bill/querylist}]]",
            type:"post",
            data:jsonObj,
            beforeSend:function () {
                return true;
            },
            success:function (result) {
                let content = '';
                const queryProviderIdSelect = $("select[name='queryProviderId']");
                if (result.success){
                    const pager=result.page;
                    const data = pager.list;
                    const param=result.param;
                    const providers = param.providers;
                    const isPayment = $("select[name='queryIsPayment']");
                    isPayment.html('');
                    let queryIsPayment='';
                    if (param.isPayment==1){
                        queryIsPayment='<option value=" ">请选择</option><option value="1" selected>未付款</option> <option value="2">已付款</option>';
                    }else if(param.isPayment==2){
                        queryIsPayment='<option value=" ">请选择</option><option value="1">未付款</option><option value="2" selected>已付款</option>';
                    }else{
                        queryIsPayment='<option value=" " selected>请选择</option><option value="1">未付款</option><option value="2">已付款</option>';

                    }
                    isPayment.html(queryIsPayment);

                    let options = '';
                    options+='<option value="">请选择</option>';
                    $.each(providers,function(i,provider){
                        if (provider.id==param.providerId){
                            options+='<option value="'+provider.id+'" selected>'+provider.proName+'</option>';
                        }else{
                            options+='<option value="'+provider.id+'">'+provider.proName+'</option>';
                        }
                    });
                    queryProviderIdSelect.html(options);
                    $.each(data,function (i, n) {
                        let payment=(n.isPayment===1)?"未付款":"已付款";

                        content+='<tr>';
                        content+='	<td><span>'+n.billCode+'</span></td>';
                        content+='	<td><span>'+n.productName+'</span></td>';
                        content+='	<td><span>'+n.proName+'</span></td>';
                        content+='	<td><span>'+n.totalPrice+'</span></td>';
                        content+='	<td><span>'+payment+'</span></td>';
                        content+='	<td><span>'+n.creationDate+'</span></td>';
                        content+='	<td>';
                        content+='		<span><a id="viewBill" href="[[@{/bill/view?id=}]]'+n.id+'" ><img src="[[@{/images/read.png}]]" alt="查看" title="查看"/></a></span>';
                        content+='		<span><a id="modifyBill" href="[[@{/bill/modify?id=}]]'+n.id+'"><img src="[[@{/images/xiugai.png}]]"  alt="修改" title="修改" id="modifyImg"/></a></span>';
                        content+='		<span><a id="deleteBill" href="javascript:;" onclick="deleteById('+n.id+')"><img src="[[@{/images/schu.png}]]"  alt="删除" title="删除" id="removeImg"/></a></span>';
                        content+='	</td>';
                        content+='</tr>';

                    });
                    $("#tbody").html(content);
                    $("#Pagination").pagination(pager.totalCount, {
                        num_edge_entries: 2,
                        num_display_entries: 4,
                        callback: queryPage,
                        items_per_page:pager.pageSize,
                        current_page:(pager.pageIndex-1),
                        prev_text:"上一页",
                        next_text:"下一页"
                    });
                }
            }
        })
    }
    $(function(){
        queryPage(0);

    });
    $("#searchbutton").click(function(){
        const queryProductName=$("#queryProductName").val();
        const queryProviderId=$("#queryProviderId").val();
        const queryIsPayment=$("#queryIsPayment").val();
        jsonObj.queryProductName=queryProductName;
        jsonObj.queryProviderId=queryProviderId;
        jsonObj.queryIsPayment=queryIsPayment;
        queryPage(0);
    })
    function deleteById(id){
        $.ajax({
            url:"[[@{/bill/delete}]]",
            type:"post",
            data:{
                id:id
            },
            beforeSend:function () {
                return true;
            },
            success:function (result) {
                if (result.success){
                    window.location.href="[[@{/bill/list}]]";
                }
            }
        })
    }


</script>

</body>
</html>